<template>
    <!-- 添加或修改盘点计划对话框 -->
    <el-dialog :title="title" v-if="open" v-model="open" width="600px" append-to-body>
        <el-form ref="form" :inline="false" :model="form" :rules="rules" label-width="90px" style="padding-left: 10%;"
            v-loading="loading">
            <el-row :gutter="20">
                <el-col :span="12" :offset="0">
                    <el-form-item label="短信模板:" prop="templateId">
                        <el-select v-model="form.templateId" value-key="" placeholder="" @change="templateChange">
                            <el-option v-for="item in messageTemplateList" :key="item.id" :label="item.templateName"
                                :value="item.id">
                            </el-option>
                        </el-select>

                    </el-form-item>
                </el-col>
                <el-col :span="12" :offset="0">

                    <el-form-item label="发送人:" prop="sendName">
                        <el-input disabled v-model="form.sendName"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-form-item label="发送内容:" prop="message">
                <el-input type="textarea" :rows="6" v-model="form.message"></el-input>
            </el-form-item>
            <el-form-item>
                <template #label>
                    消费确认
                    <el-tooltip class="item" effect="dark" placement="top">
                        <template #content>
                            <div style="width: 200px;">
                                说明<br />计费规则:短信字数含"签名+模版内容+变量内容”，短信70个字数含以内，按1条短信计费;超出70个字为长短信，按照67个字数记为1条短信费用。实际发送时，签名名称、变量内容、拒收请回复R等都会影响总字数，模板提交时字数统计差异较大，请以模板审核通过后发送测试为准
                            </div>
                        </template>
                        <el-icon>
                            <QuestionFilled />
                        </el-icon>
                    </el-tooltip>
                    :
                </template>
                <div>预计消费 <span style="color: #1ABC60;">{{ form.smsConsumption }}</span> 条短信，短信目前还剩 <span
                        style="color: red;">{{
                        smsBalance }}</span> 条，购买套餐</div>
            </el-form-item>
        </el-form>

        <template #footer>
            <div class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="submitForm">确定</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script>
import modelMixin from '@/mixins/modelMixin'
import { listMessageTemplate } from '@/api/system/messageTemplate';
import request from '@/utils/request';
import useUserStore from '@/store/modules/user'
const userStore = useUserStore()
export default {
    name: "addForm",
    mixins: [modelMixin],
    data() {
        return {
            id: null,//必须配置，编辑需要赋值
            open: false,
            title: "添加品牌",
            smsBalance: userStore.sysTenantVo.smsBalance,
            messageTemplateList: [],
            orderInfo: {},
            form: {
                sendName: userStore.nickname,
                sendUserId: userStore.userId,
            },
            rules: {
                templateId: [
                    { required: true, message: "请选择短信模板", trigger: "blur" }
                ],
                message: [
                    { required: true, message: "短信内容不能为空", trigger: "blur" }
                ],
            },
        }
    },
    created() {
    },
    watch: {
        'form.message'(newValue, oldValue) {
            this.form.smsConsumption = Math.ceil(newValue.length / 70)
        }
    },
    methods: {
        show(record) {

            this.orderInfo = record
            this.listMessageTemplate()
            this.form = {
                sendName: userStore.nickname,
                sendUserId: userStore.userId,
                orderNo: record.orderNo,
                sendMobile: '',
                sendTime: '2024-08-08 08:08:08',
                sendStatus: '2',
                channelType: '1',
            }
            this.open = true;
        },
        cancel() {
            this.open = false;
        },
        categoryChange(value) {
            this.form.categoryId = value;
        },
        listMessageTemplate() {
            listMessageTemplate({
                pageNum: 1,
                pageSize: 200,
            }).then(res => {
                this.messageTemplateList = res.rows;
            })
        },
        templateChange(value) {
            let template = this.messageTemplateList.find(item => item.id == value)
            const reg = /\$\{code\}/g
            this.form.message = template.templateContent.replace(reg, this.orderInfo.peisongNo)
        },

        /**
         * @提交
         * @param {*} close 
         */
        submitForm(close = true) {
            this.$refs.form.validate(valid => {
                if (valid) {
                    typeof (this.classifyForm) === 'function' && this.classifyForm()
                    if (!this.form.sendMobile) {
                        this.$modal.msgError('手机号不存在')
                        return
                    }
                    this.loading = true
                    request({
                        url: '/system/sendMessage/sendMessage',
                        method: 'post',
                        data: this.form
                    }).then(res => {
                        if (res.code == 200) {
                            this.loading = false
                            if (res.data.data.success) {
                                this.$message.success('操作成功')
                                this.open = false
                                this.$emit('refresh')
                            } else {
                                this.$modal.msgError(res.data.data.Message)
                            }
                        } else {
                            this.$modal.msgError(res.msg)
                        }
                    }).catch(() => {
                        this.loading = false
                    })
                }
            });
        },
    }
}
</script>

<style lang="scss" scoped></style>